<!-- 公司运营 -->
<template>
    <div class='p-companyManagement app-container'>
        <div class="mess">
            <div class="tip">数据截止日期：当前时间如{{time}}</div>
            <ul class="companyTop clearfix">
                <li v-for="(item,i) in messList" :key="i">
                    <img :src="item.img" alt="">
                    <span class="name">{{item.name}}</span>
                    <span class="money">{{item.money}}元</span>
                </li>
            </ul>
            <ul class="companyBottom">
                <li v-for="(item,i) in bottomList" :key="i">
                    <img :src="item.img" alt="">
                    <span class="name">{{item.name}}</span>
                    <span class="money" v-if="i== 0 || i== 2">{{item.money}}</span>
                    <span class="money" v-else>{{item.money}}%</span>
                </li>
            </ul>
        </div>
        <div class="list-wrapper" style="flex: 1;">
            <div class="content">
                <div class="echart-content">
                    <ul class="echartContent clearfix">
                        <!-- 订单情况 -->
                        <li id="order"></li>
                        <!-- 订单对比情况 -->
                        <li>
                            <div class="cutMonth clearfix">
                                <span class="month">{{month[0]}}月</span>
                                <img @click="preClick(0)" class="left" src="../../../assets/left.png" />
                                <img @click="nextClick(0)" class="right" src="../../../assets/right.png" />
                            </div>
                            <div id="orderMessage"></div>
                        </li>
                        <!-- 收入情况 -->
                        <li id="income"></li>
                        <!-- 收入对比情况 -->
                        <li>
                            <div class="cutMonth clearfix">
                                <span class="month">{{month[1]}}月</span>
                                <img @click="preClick(1)" class="left" src="../../../assets/left.png" />
                                <img @click="nextClick(1)" class="right" src="../../../assets/right.png" />
                            </div>
                            <div id="incomeMessage"></div>
                        </li>
                        <!-- 利润情况 -->
                        <li id="profits"></li>
                        <!-- 利润对比情况 -->
                        <li>
                            <div class="cutMonth clearfix">
                                <span class="month">{{month[2]}}月</span>
                                <img @click="preClick(2)" class="left" src="../../../assets/left.png" />
                                <img @click="nextClick(2)" class="right" src="../../../assets/right.png" />
                            </div>
                            <div id="profitsMessage"></div>
                        </li>
                        <!-- 应收款情况 -->
                        <li id="collection"></li>
                        <!-- 应收款对比情况 -->
                        <li>
                            <div class="cutMonth clearfix">
                                <span class="month">{{month[3]}}月</span>
                                <img @click="preClick(3)" class="left" src="../../../assets/left.png" />
                                <img @click="nextClick(3)" class="right" src="../../../assets/right.png" />
                            </div>
                            <div id="collectionMessage"></div>
                        </li>
                        <!-- 应付款情况 -->
                        <li id="payment"></li>
                        <!-- 应付款对比情况 -->
                        <li>
                            <div class="cutMonth clearfix">
                                <span class="month">{{month[4]}}月</span>
                                <img @click="preClick(4)" class="left" src="../../../assets/left.png" />
                                <img @click="nextClick(4)" class="right" src="../../../assets/right.png" />
                            </div>
                            <div id="paymentMessage"></div>
                        </li>
                    </ul>
                    <div class="echartTip">
                        <ul>
                            <li v-for="(item,i) in tip" :key="i">
                                <span>{{item.name}}</span>
                                <span>{{item.money}}<i v-if="i == 2">%</i></span>
                            </li>
                        </ul>
                    </div>
                    <ul class="echartContent clearfix">
                        <li id="cooperation"></li>
                        <li class="cooperations">
                            <div class="cutMonth clearfix">
                                <span class="month">{{month[5]}}月</span>
                                <img @click="preClick(5)" class="left" src="../../../assets/left.png" />
                                <img @click="nextClick(5)" class="right" src="../../../assets/right.png" />
                            </div>
                            <div id="cooperationMessage"></div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import echarts from 'echarts'
    export default {
        data() {
            return {
                time:'2020年7月1日',
                messList:[
                    {id:'1',img:require('../../../assets/year.png'),name:'本年度订单总金额',money:'92655660'},
                    {id:'2',img:require('../../../assets/afreceivable.png'),name:'项目应收款总金额',money:'92655660'},
                    {id:'3',img:require('../../../assets/profit.png'),name:'项目应收款总金额',money:'92655660'},
                    {id:'4',img:require('../../../assets/receivable.png'),name:'项目应收款总金额',money:'92655660'},
                    {id:'5',img:require('../../../assets/cashflow.png'),name:'项目应收款总金额',money:'92655660'},
                ],
                bottomList:[
                    {id:'1',img:require('../../../assets/year.png'),name:'销 售 线 索 总 数',money:'120'},
                    {id:'2',img:require('../../../assets/afreceivable.png'),name:'转        化        率',money:'50'},
                    {id:'3',img:require('../../../assets/profit.png'),name:'可查看所有销售机会',money:'80'},
                    {id:'4',img:require('../../../assets/receivable.png'),name:'成       单       率',money:'40'},
                ],
                tip:[
                    {name:'本年度项目总数',money:'60'},
                    {name:'在节点时间内完成的项目总数',money:'50'},
                    {name:'项目节点达成率',money:'30'}
				],
				month:[3,2,3,4,5,6],
            }
        },
        mounted() {
            this.initOrderChart(); //订单情况
            this.initOrderMessageChart(); //订单对比情况
            this.initIncomeChart(); //收入情况
            this.initIncomeMessageChart(); //收入对比情况
            this.initProfitsChart(); //利润情况
            this.initProfitsMessageChart(); //利润对比情况
            this.initCollectionChart(); //应收款情况
            this.initCollectionMessageChart(); //应收款对比情况
            this.initPaymentChart(); //应付款情况
            this.initPaymentMessageChart(); //应付款对比情况
            this.initCooperationChart(); //合作情况
            this.initCooperationMessageChart(); //合作对比情况
        },
        methods: {
			//月份切换
			preClick(id) {
				var _this = this;
				_this.month.forEach(function(e,i){
					if (id == i) {
						if (e >= 2) {
							_this.month[i]--;
							_this.$forceUpdate();
						}
					}
				})
			},
			nextClick(id) {
				var _this = this;
				_this.month.forEach(function(e,i){
					if (id == i) {
						if (e < 12) {
							_this.month[i]++;
							_this.$forceUpdate();
						}
					}
				})
				// console.log(_this.month)
			},
            //订单情况
            initOrderChart() {
                this.orderChart = echarts.init(document.getElementById('order'))
                this.orderChart.setOption({
                    title: {
                        text: '单位：万元',
                        left:'15%',
                        textStyle:{ color:'#333', fontSize: 14, },
                    },
                    graphic: [
                        {type:'text',z:100,right:'60px',top:'top',
                            style: {fill:'#333',text:"订单情况",font:'13px Microsoft YaHei'}}
                    ],
                    legend: { data: ['本年度订单目标', '订单总额'] },
                    xAxis: {
                        data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月','本年度累计'],
                        axisLabel: { textStyle: { color: '#333' } },
                        axisTick: { show: false },
                        axisLine: {lineStyle:{color:'#ADADAD'} },
                    },
                    yAxis: {
                        max: 2000,
                        splitNumber:10,
                        axisLine: { show: false },
                        axisTick: { show: false },
                        axisLabel: { textStyle: { color: '#333' } }
                    },
                    series: [
                        {
                            name:'订单总额',
                            type: 'bar',
                            stack:'堆叠',
                            itemStyle: {
                                barBorderRadius:[3, 3, 0, 0],
                                color: new echarts.graphic.LinearGradient( 0,0,0,1,[ {offset:0,color:'#F8BD77'},{offset:1,color:'#F18300'}])
                            },
                            data: [1220, 1182, 1191, 1234, 1290, 1330, 1310, 1123, 1442, 1321, 190, 1149,900]
                        },
                        {
                            name:'本年度订单目标',
                            type: 'bar',
                            stack:'堆叠',
                            itemStyle: {
                                barBorderRadius:[3, 3, 0, 0],
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0, color: '#BBCFFA'},{offset: 1, color: '#7FA6FB'}])
                            },
                            barCategoryGap: '75%',
                            data: [0,0,0,0,0,0,0,0,0,0,0,0,1000],
                            animation: false
                        },
                    ]
                })
            },
            //订单对比情况
            initOrderMessageChart() {
                this.orderMessageChart = echarts.init(document.getElementById('orderMessage'))
                this.orderMessageChart.setOption({
                    title: {
                        text: '事业部订单对比',
                        top:'10%',
                        left:'10%',
                        textStyle:{color:'#333',fontSize:14},
                    },
                    legend: {
                        left: "45%",
                        data:['各事业部订单总额','累计订单总额','本年度订单目标值'],
                    },
                    xAxis: {
                        data: ['机器人事业部','一般工业','数据信息化','物流自动化','船舶与海工','伟本木工','本月累计'],
                        axisLabel: {textStyle:{color:'#333',fontSize:10,},
                            formatter : function(params){
                                var newParamsName = "";// 最终拼接成的字符串
                                var paramsNameNumber = params.length;// 实际标签的个数
                                var provideNumber = 3;// 每行能显示的字的个数
                                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
                                //判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                                // 条件等同于rowNumber>1
                                if (paramsNameNumber > provideNumber) {
                                    /** 循环每一行,p表示行 */
                                    for (var p = 0; p < rowNumber; p++) {
                                        var tempStr = "";// 表示每一次截取的字符串
                                        var start = p * provideNumber;// 开始截取的位置
                                        var end = start + provideNumber;// 结束截取的位置
                                        // 此处特殊处理最后一行的索引值
                                        if (p == rowNumber - 1) {
                                            // 最后一次不换行
                                            tempStr = params.substring(start, paramsNameNumber);
                                        } else {
                                            // 每一次拼接字符串并换行
                                            tempStr = params.substring(start, end) + "\n";
                                        }
                                        newParamsName += tempStr;// 最终拼成的字符串
                                    }

                                } else {
                                    // 将旧标签的值赋给新标签
                                    newParamsName = params;
                                }
                                //将最终的字符串返回
                                return newParamsName;
                            }
                        },
                        axisTick: {show: false},
                        axisLine: {lineStyle:{color:'#ADADAD'}},
                    },
                    yAxis: {
                        max: 5000,
                        splitNumber:10,
                        axisLine: {lineStyle:{color:'#C5C5C5'}},
                        axisTick: { show: false },
                        axisLabel: { textStyle: { color: '#333' } },
                        splitLine: {show:false}
                    },
                    series: [
                        {
                            name:'本年度订单目标值',
                            type: 'bar',
                            stack:'堆叠',
                            barCategoryGap: '85%',
                            itemStyle: {
                                color: '#4680FF'
                            },
                            data: [120, 112, 111, 124, 120, 130, 130]
                        },
                        {
                            name:'累计订单总额',
                            type: 'bar',
                            stack:'堆叠',
                            barCategoryGap: '85%',
                            itemStyle: {
                                color: '#F18300'
                            },
                            data: [120, 182, 191, 124, 190, 130, 130]
                        },
                        {
                            name:'各事业部订单总额',
                            type: 'bar',
                            stack:'堆叠',
                            itemStyle: {
                                barBorderRadius:[2, 2, 0, 0],
                                color: new echarts.graphic.LinearGradient( 0,0,0,1,[ {offset:0,color:'#FEAABC'},{offset:1,color:'#FF6384'}])
                            },
                            barCategoryGap: '85%',
                            data: [100,200,300,100,20,30,40],
                            animation: false
                        },
                    ]
                })
            },
            //收入情况
            initIncomeChart() {
                this.incomeChart = echarts.init(document.getElementById('income'))
                this.incomeChart.setOption({
                    title: {
                        text: '单位：万元',
                        left:'15%',
                        textStyle:{ color:'#333', fontSize: 14, },
                    },
                    graphic: [
                        { type: 'text', z: 100, right: '60px', top: 'top',
                            style: {fill:'#333',text:"收入情况",font:'13px Microsoft YaHei'}}
                    ],
                    legend: { data: ['本年度收入目标', '确认收入总额'] },
                    xAxis: {
                        data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月','本年度累计'],
                        axisLabel: { textStyle: { color: '#333' } },
                        axisTick: { show: false },
                        axisLine: {lineStyle:{color:'#ADADAD'} },
                    },
                    yAxis: {
                        max: 2000,
                        splitNumber:10,
                        axisLine: { show: false },
                        axisTick: { show: false },
                        axisLabel: { textStyle: { color: '#333' } }
                    },
                    series: [
                        {
                            name:'确认收入总额',
                            type: 'bar',
                            stack:'堆叠',
                            itemStyle: {
                                barBorderRadius:[3, 3, 0, 0],
                                color: new echarts.graphic.LinearGradient( 0,0,0,1,[ {offset:0,color:'#F8BD77'},{offset:1,color:'#F18300'}])
                            },
                            data: [1220, 1182, 1191, 1234, 1290, 1330, 1310, 1123, 1442, 1321, 190, 1149,900]
                        },
                        {
                            name:'本年度收入目标',
                            type: 'bar',
                            stack:'堆叠',
                            itemStyle: {
                                barBorderRadius:[3, 3, 0, 0],
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0, color: '#BBCFFA'},{offset: 1, color: '#7FA6FB'}])
                            },
                            barCategoryGap: '75%',
                            data: [0,0,0,0,0,0,0,0,0,0,0,0,1000],
                            animation: false
                        },
                    ]
                })
            },
            //收入对比情况
            initIncomeMessageChart() {
                this.incomeMessageChart = echarts.init(document.getElementById('incomeMessage'))
                this.incomeMessageChart.setOption({
                    title: {
                        text: '事业部收入对比',
                        top:'10%',
                        left:'10%',
                        textStyle:{color:'#333',fontSize:14},
                    },
                    legend: {
                        left: "45%",
                        data:['各事业部收入总额','累计收入总额','本年度收入目标值'],
                    },
                    xAxis: {
                        data: ['机器人事业部','一般工业','数据信息化','物流自动化','船舶与海工','伟本木工','本月累计'],
                        axisLabel: {textStyle:{color:'#333',fontSize:10,},
                            formatter : function(params){
                                var newParamsName = "";// 最终拼接成的字符串
                                var paramsNameNumber = params.length;// 实际标签的个数
                                var provideNumber = 3;// 每行能显示的字的个数
                                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
                                //判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                                // 条件等同于rowNumber>1
                                if (paramsNameNumber > provideNumber) {
                                    /** 循环每一行,p表示行 */
                                    for (var p = 0; p < rowNumber; p++) {
                                        var tempStr = "";// 表示每一次截取的字符串
                                        var start = p * provideNumber;// 开始截取的位置
                                        var end = start + provideNumber;// 结束截取的位置
                                        // 此处特殊处理最后一行的索引值
                                        if (p == rowNumber - 1) {
                                            // 最后一次不换行
                                            tempStr = params.substring(start, paramsNameNumber);
                                        } else {
                                            // 每一次拼接字符串并换行
                                            tempStr = params.substring(start, end) + "\n";
                                        }
                                        newParamsName += tempStr;// 最终拼成的字符串
                                    }

                                } else {
                                    // 将旧标签的值赋给新标签
                                    newParamsName = params;
                                }
                                //将最终的字符串返回
                                return newParamsName;
                            }
                        },
                        axisTick: {show: false},
                        axisLine: {lineStyle:{color:'#ADADAD'}},
                    },
                    yAxis: {
                        max: 5000,
                        splitNumber:10,
                        axisLine: {lineStyle:{color:'#C5C5C5'}},
                        axisTick: { show: false },
                        axisLabel: { textStyle: { color: '#333' } },
                        splitLine: {show:false}
                    },
                    series: [
                        {
                            name:'本年度收入目标值',
                            type: 'bar',
                            stack:'堆叠',
                            barCategoryGap: '85%',
                            itemStyle: {
                                color: '#4680FF'
                            },
                            data: [120, 112, 111, 124, 120, 130, 130]
                        },
                        {
                            name:'累计收入总额',
                            type: 'bar',
                            stack:'堆叠',
                            barCategoryGap: '85%',
                            itemStyle: {
                                color: '#F18300'
                            },
                            data: [120, 182, 191, 124, 190, 130, 130]
                        },
                        {
                            name:'各事业部收入总额',
                            type: 'bar',
                            stack:'堆叠',
                            itemStyle: {
                                barBorderRadius:[2, 2, 0, 0],
                                color: new echarts.graphic.LinearGradient( 0,0,0,1,[ {offset:0,color:'#FEAABC'},{offset:1,color:'#FF6384'}])
                            },
                            barCategoryGap: '85%',
                            data: [100,200,300,100,20,30,40],
                            animation: false
                        },
                    ]
                })
            },
            //利润情况
            initProfitsChart() {
                this.profitsChart = echarts.init(document.getElementById('profits'))
                this.profitsChart.setOption({
                    title: {
                        text: '单位：万元',
                        left:'15%',
                        textStyle:{ color:'#333', fontSize: 14, },
                    },
                    graphic: [
                        { type: 'text', z: 100, right: '60px', top: 'top',
                            style: {fill:'#333',text:"利润情况",font:'13px Microsoft YaHei'}}
                    ],
                    legend: { data: ['本年度利润目标', '项目利润总额'] },
                    xAxis: {
                        data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月','本年度累计'],
                        axisLabel: { textStyle: { color: '#333' } },
                        axisTick: { show: false },
                        axisLine: {lineStyle:{color:'#ADADAD'} },
                    },
                    yAxis: {
                        max: 2000,
                        splitNumber:10,
                        axisLine: { show: false },
                        axisTick: { show: false },
                        axisLabel: { textStyle: { color: '#333' } }
                    },
                    series: [
                        {
                            name:'项目利润总额',
                            type: 'bar',
                            stack:'堆叠',
                            itemStyle: {
                                barBorderRadius:[3, 3, 0, 0],
                                color: new echarts.graphic.LinearGradient( 0,0,0,1,[ {offset:0,color:'#F8BD77'},{offset:1,color:'#F18300'}])
                            },
                            data: [1220, 1182, 1191, 1234, 1290, 1330, 1310, 1123, 1442, 1321, 190, 1149,900]
                        },
                        {
                            name:'本年度利润目标',
                            type: 'bar',
                            stack:'堆叠',
                            itemStyle: {
                                barBorderRadius:[3, 3, 0, 0],
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0, color: '#BBCFFA'},{offset: 1, color: '#7FA6FB'}])
                            },
                            barCategoryGap: '75%',
                            data: [0,0,0,0,0,0,0,0,0,0,0,0,1000],
                            animation: false
                        },
                    ]
                })
            },
            //利润对比情况
            initProfitsMessageChart() {
                this.profitsMessageChart = echarts.init(document.getElementById('profitsMessage'))
                this.profitsMessageChart.setOption({
                    title: {
                        text: '事业部利润对比',
                        top:'10%',
                        left:'10%',
                        textStyle:{color:'#333',fontSize:14},
                    },
                    legend: {
                        left: "45%",
                        data:['各事业部利润总额','累计利润总额','本年度利润目标值'],
                    },
                    xAxis: {
                        data: ['机器人事业部','一般工业','数据信息化','物流自动化','船舶与海工','伟本木工','本月累计'],
                        axisLabel: {textStyle:{color:'#333',fontSize:10,},
                            formatter : function(params){
                                var newParamsName = "";// 最终拼接成的字符串
                                var paramsNameNumber = params.length;// 实际标签的个数
                                var provideNumber = 3;// 每行能显示的字的个数
                                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
                                //判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                                // 条件等同于rowNumber>1
                                if (paramsNameNumber > provideNumber) {
                                    /** 循环每一行,p表示行 */
                                    for (var p = 0; p < rowNumber; p++) {
                                        var tempStr = "";// 表示每一次截取的字符串
                                        var start = p * provideNumber;// 开始截取的位置
                                        var end = start + provideNumber;// 结束截取的位置
                                        // 此处特殊处理最后一行的索引值
                                        if (p == rowNumber - 1) {
                                            // 最后一次不换行
                                            tempStr = params.substring(start, paramsNameNumber);
                                        } else {
                                            // 每一次拼接字符串并换行
                                            tempStr = params.substring(start, end) + "\n";
                                        }
                                        newParamsName += tempStr;// 最终拼成的字符串
                                    }

                                } else {
                                    // 将旧标签的值赋给新标签
                                    newParamsName = params;
                                }
                                //将最终的字符串返回
                                return newParamsName;
                            }
                        },
                        axisTick: {show: false},
                        axisLine: {lineStyle:{color:'#ADADAD'}},
                    },
                    yAxis: {
                        max: 5000,
                        splitNumber:10,
                        axisLine: {lineStyle:{color:'#C5C5C5'}},
                        axisTick: { show: false },
                        axisLabel: { textStyle: { color: '#333' } },
                        splitLine: {show:false}
                    },
                    series: [
                        {
                            name:'本年度利润目标值',
                            type: 'bar',
                            stack:'堆叠',
                            barCategoryGap: '85%',
                            itemStyle: {
                                color: '#4680FF'
                            },
                            data: [120, 112, 111, 124, 120, 130, 130]
                        },
                        {
                            name:'累计利润总额',
                            type: 'bar',
                            stack:'堆叠',
                            barCategoryGap: '85%',
                            itemStyle: {
                                color: '#F18300'
                            },
                            data: [120, 182, 191, 124, 190, 130, 130]
                        },
                        {
                            name:'各事业部利润总额',
                            type: 'bar',
                            stack:'堆叠',
                            itemStyle: {
                                barBorderRadius:[2, 2, 0, 0],
                                color: new echarts.graphic.LinearGradient( 0,0,0,1,[ {offset:0,color:'#FEAABC'},{offset:1,color:'#FF6384'}])
                            },
                            barCategoryGap: '85%',
                            data: [100,200,300,100,20,30,40],
                            animation: false
                        },
                    ]
                })
            },
            //应收款情况
            initCollectionChart() {
                this.collectionChart = echarts.init(document.getElementById('collection'))
                this.collectionChart.setOption({
                    title: {
                        text: '单位：万元',
                        left:'15%',
                        textStyle:{ color:'#333', fontSize: 14, },
                    },
                    graphic: [
                        { type: 'text', z: 100, right: '60px', top: 'top',
                            style: {fill:'#333',text:"项目应收款情况",font:'13px Microsoft YaHei'}}
                    ],
                    legend: {data:['项目应收款总额']},
                    xAxis: {
                        data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月','本年度累计'],
                        axisLabel: { textStyle: { color: '#333' } },
                        axisTick: { show: false },
                        axisLine: {lineStyle:{color:'#ADADAD'} },
                    },
                    yAxis: {
                        max: 2000,
                        splitNumber:10,
                        axisLine: { show: false },
                        axisTick: { show: false },
                        axisLabel: { textStyle: { color: '#333' } }
                    },
                    series: [
                        {
                            name:'项目应收款总额',
                            type: 'bar',
                            stack:'堆叠',
                            barCategoryGap: '75%',
                            itemStyle: {
                                barBorderRadius:[3, 3, 0, 0],
                                color: new echarts.graphic.LinearGradient( 0,0,0,1,[ {offset:0,color:'#F8BD77'},{offset:1,color:'#F18300'}])
                            },
                            data: [1220, 1182, 1191, 1234, 1290, 1330, 1310, 1123, 1442, 1321, 190, 1149,900],
                            animation: false
                        },
                    ]
                })
            },
            //应收款对比情况
            initCollectionMessageChart() {
                this.collectionMessageChart = echarts.init(document.getElementById('collectionMessage'))
                this.collectionMessageChart.setOption({
                    title: {
                        text: '事业部应收款对比',
                        top:'10%',
                        left:'10%',
                        textStyle:{color:'#333',fontSize:14},
                    },
                    legend: {
                        left: "45%",
                        data:['各事业部收款总额','累计收款总额'],
                    },
                    xAxis: {
                        data: ['机器人事业部','一般工业','数据信息化','物流自动化','船舶与海工','伟本木工','本月累计'],
                        axisLabel: {textStyle:{color:'#333',fontSize:10,},
                            formatter : function(params){
                                var newParamsName = "";// 最终拼接成的字符串
                                var paramsNameNumber = params.length;// 实际标签的个数
                                var provideNumber = 3;// 每行能显示的字的个数
                                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
                                //判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                                // 条件等同于rowNumber>1
                                if (paramsNameNumber > provideNumber) {
                                    /** 循环每一行,p表示行 */
                                    for (var p = 0; p < rowNumber; p++) {
                                        var tempStr = "";// 表示每一次截取的字符串
                                        var start = p * provideNumber;// 开始截取的位置
                                        var end = start + provideNumber;// 结束截取的位置
                                        // 此处特殊处理最后一行的索引值
                                        if (p == rowNumber - 1) {
                                            // 最后一次不换行
                                            tempStr = params.substring(start, paramsNameNumber);
                                        } else {
                                            // 每一次拼接字符串并换行
                                            tempStr = params.substring(start, end) + "\n";
                                        }
                                        newParamsName += tempStr;// 最终拼成的字符串
                                    }

                                } else {
                                    // 将旧标签的值赋给新标签
                                    newParamsName = params;
                                }
                                //将最终的字符串返回
                                return newParamsName;
                            }
                        },
                        axisTick: {show: false},
                        axisLine: {lineStyle:{color:'#ADADAD'}},
                    },
                    yAxis: {
                        max: 5000,
                        splitNumber:10,
                        axisLine: {lineStyle:{color:'#C5C5C5'}},
                        axisTick: { show: false },
                        axisLabel: { textStyle: { color: '#333' } },
                        splitLine: {show:false}
                    },
                    series: [
                        {
                            name:'累计收款总额',
                            type: 'bar',
                            stack:'堆叠',
                            barCategoryGap: '85%',
                            itemStyle: {
                                color: '#F18300'
                            },
                            data: [120, 182, 191, 124, 190, 130, 130]
                        },
                        {
                            name:'各事业部收款总额',
                            type: 'bar',
                            stack:'堆叠',
                            itemStyle: {
                                barBorderRadius:[2, 2, 0, 0],
                                color: new echarts.graphic.LinearGradient( 0,0,0,1,[ {offset:0,color:'#FEAABC'},{offset:1,color:'#FF6384'}])
                            },
                            barCategoryGap: '85%',
                            data: [100,200,300,100,20,30,40],
                            animation: false
                        },
                    ]
                })
            },
            //应付款情况
            initPaymentChart() {
                this.paymentChart = echarts.init(document.getElementById('payment'))
                this.paymentChart.setOption({
                    title: {
                        text: '单位：万元',
                        left:'15%',
                        textStyle:{ color:'#333', fontSize: 14, },
                    },
                    graphic: [
                        { type: 'text', z: 100, right: '60px', top: 'top',
                            style: {fill:'#333',text:"项目应付款情况",font:'13px Microsoft YaHei'}}
                    ],
                    legend: {data:['项目应付款情况总额']},
                    xAxis: {
                        data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月','本年度累计'],
                        axisLabel: { textStyle: { color: '#333' } },
                        axisTick: { show: false },
                        axisLine: {lineStyle:{color:'#ADADAD'} },
                    },
                    yAxis: {
                        max: 2000,
                        splitNumber:10,
                        axisLine: { show: false },
                        axisTick: { show: false },
                        axisLabel: { textStyle: { color: '#333' } }
                    },
                    series: [
                        {
                            name:'项目应付款总额',
                            type: 'bar',
                            stack:'堆叠',
                            itemStyle: {
                                barBorderRadius:[3, 3, 0, 0],
                                color: new echarts.graphic.LinearGradient( 0,0,0,1,[ {offset:0,color:'#F8BD77'},{offset:1,color:'#F18300'}])
                            },
                            barCategoryGap: '75%',
                            data: [1220, 1182, 1191, 1234, 1290, 1330, 1310, 1123, 1442, 1321, 190, 1149,900],
                            animation: false
                        },
                    ]
                })
            },
            //应付款对比情况
            initPaymentMessageChart() {
                this.paymentMessageChart = echarts.init(document.getElementById('paymentMessage'))
                this.paymentMessageChart.setOption({
                    title: {
                        text: '事业部应付款对比',
                        top:'10%',
                        left:'10%',
                        textStyle:{color:'#333',fontSize:14},
                    },
                    legend: {
                        left: "45%",
                        data:['各事业部付款总额','累计付款总额'],
                    },
                    xAxis: {
                        data: ['机器人事业部','一般工业','数据信息化','物流自动化','船舶与海工','伟本木工','本月累计'],
                        axisLabel: {textStyle:{color:'#333',fontSize:10,},
                            formatter : function(params){
                                var newParamsName = "";// 最终拼接成的字符串
                                var paramsNameNumber = params.length;// 实际标签的个数
                                var provideNumber = 3;// 每行能显示的字的个数
                                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
                                //判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                                // 条件等同于rowNumber>1
                                if (paramsNameNumber > provideNumber) {
                                    /** 循环每一行,p表示行 */
                                    for (var p = 0; p < rowNumber; p++) {
                                        var tempStr = "";// 表示每一次截取的字符串
                                        var start = p * provideNumber;// 开始截取的位置
                                        var end = start + provideNumber;// 结束截取的位置
                                        // 此处特殊处理最后一行的索引值
                                        if (p == rowNumber - 1) {
                                            // 最后一次不换行
                                            tempStr = params.substring(start, paramsNameNumber);
                                        } else {
                                            // 每一次拼接字符串并换行
                                            tempStr = params.substring(start, end) + "\n";
                                        }
                                        newParamsName += tempStr;// 最终拼成的字符串
                                    }

                                } else {
                                    // 将旧标签的值赋给新标签
                                    newParamsName = params;
                                }
                                //将最终的字符串返回
                                return newParamsName;
                            }
                        },
                        axisTick: {show: false},
                        axisLine: {lineStyle:{color:'#ADADAD'}},
                    },
                    yAxis: {
                        max: 5000,
                        splitNumber:10,
                        axisLine: {lineStyle:{color:'#C5C5C5'}},
                        axisTick: { show: false },
                        axisLabel: { textStyle: { color: '#333' } },
                        splitLine: {show:false}
                    },
                    series: [
                        {
                            name:'累计付款总额',
                            type: 'bar',
                            stack:'堆叠',
                            barCategoryGap: '85%',
                            itemStyle: {
                                color: '#F18300'
                            },
                            data: [120, 182, 191, 124, 190, 130, 130]
                        },
                        {
                            name:'各事业部付款总额',
                            type: 'bar',
                            stack:'堆叠',
                            itemStyle: {
                                barBorderRadius:[2, 2, 0, 0],
                                color: new echarts.graphic.LinearGradient( 0,0,0,1,[ {offset:0,color:'#FEAABC'},{offset:1,color:'#FF6384'}])
                            },
                            barCategoryGap: '85%',
                            data: [100,200,300,100,20,30,40],
                            animation: false
                        },
                    ]
                })
            },
            //合作情况
            initCooperationChart() {
                this.cooperationChart = echarts.init(document.getElementById('cooperation'))
                this.cooperationChart.setOption({
                    title: {
                        text: '单位：万元',
                        left:'8%',
                        top:'6%',
                        textStyle:{ color:'#333', fontSize: 14, },
                    },
                    grid: {left:'3%',right:'4%',bottom:'3%',containLabel:true},
                    graphic: [
                        { type: 'text', z: 100, right: '60px', top: '18px',
                            style: {fill:'#333',text:"项目节点达成率",font:'13px Microsoft YaHei'}}
                    ],
                    // legend: { data: ['本年度收入目标', '确认收入总额'] },
                    xAxis: {
                        data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月','本年度累计'],
                        axisLabel: { textStyle: { color: '#333' } },
                        axisTick: { show: false },
                        axisLine: {lineStyle:{color:'#ADADAD'} },
                    },
                    yAxis: {
                        max: 2000,
                        splitNumber:10,
                        axisLine: { show: false },
                        axisTick: { show: false },
                        axisLabel: { textStyle: { color: '#333' } }
                    },
                    series: [
                        {
                            // name:'确认收入总额',
                            type: 'bar',
                            stack:'堆叠',
                            barCategoryGap: '75%',
                            itemStyle: {
                                barBorderRadius:[3, 3, 0, 0],
                                color: new echarts.graphic.LinearGradient( 0,0,0,1,[ {offset:0,color:'#F8BD77'},{offset:1,color:'#F18300'}])
                            },
                            data: [1220, 1182, 1191, 1234, 1290, 1330, 1310, 1123, 1442, 1321, 190, 1149,900]
                        },
                    ]
                })
            },
            //合作对比情况
            initCooperationMessageChart() {
                this.cooperationMessageChart = echarts.init(document.getElementById('cooperationMessage'))
                this.cooperationMessageChart.setOption({
                    title: {
						text: '事业部项目节点达成率',
						top:'10%',
						left:'10%',
						textStyle:{color:'#333',fontSize:14},
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '1.6%',
						containLabel: true
					},
					xAxis: {
						data: ['机器人事业部','一般工业','数据信息化','物流自动化','船舶与海工','伟本木工','本月累计'],
						axisLine: {
							lineStyle: {
								color: '#333'
							},
						},
                        // boundaryGap: false,
						axisTick: {show: false},
						axisLabel: {textStyle:{color:'#333',fontSize:10,},
							formatter : function(params){
								var newParamsName = "";// 最终拼接成的字符串
								var paramsNameNumber = params.length;// 实际标签的个数
								var provideNumber = 3;// 每行能显示的字的个数
								var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
								//判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
								// 条件等同于rowNumber>1
								if (paramsNameNumber > provideNumber) {
									/** 循环每一行,p表示行 */
									for (var p = 0; p < rowNumber; p++) {
										var tempStr = "";// 表示每一次截取的字符串
										var start = p * provideNumber;// 开始截取的位置
										var end = start + provideNumber;// 结束截取的位置
										// 此处特殊处理最后一行的索引值
										if (p == rowNumber - 1) {
											// 最后一次不换行
											tempStr = params.substring(start, paramsNameNumber);
										} else {
											// 每一次拼接字符串并换行
											tempStr = params.substring(start, end) + "\n";
										}
										newParamsName += tempStr;// 最终拼成的字符串
									}
								} else {
									// 将旧标签的值赋给新标签
									newParamsName = params;
								}
								//将最终的字符串返回
								return newParamsName;
							}
						},
					},
					yAxis: [
						{
							type: 'value',
							scale: true,
							splitNumber:10,
							axisLine: {lineStyle:{color:'#ccc'}},
							splitLine: {show: false},
							axisTick: {show: false},
							max: 5000,
						},
						{
							type: 'value',
							scale: true,
							axisLine: {show:false,lineStyle:{color:'#ccc'}},
							splitLine: {show: false},
							axisTick: {show: false},
							splitNumber:10,
							max: 200,
							min: 0,
							axisLabel:{formatter: '{value}.00%'}
						}
					],
					series: [
						{
							name: 'line',
							type: 'line',
							smooth: true,
							symbol:'circle',
							symbolSize: 8,
							itemStyle: {
								barBorderRadius: 5,
								normal: {borderColor:'#fff',color: "#F18300",lineStyle: {color: "#4680FF"}}
							},
							data: [220, 3082, 491, 4034, 190, 3030, 110]
						},
						{
							name: 'bar',
							type: 'bar',
							barWidth: 6,
							itemStyle: {
								barBorderRadius: 5,
								color: new echarts.graphic.LinearGradient(
									0, 0, 0, 1,
									[
										{offset: 0, color: '#9EA5F9'},
										{offset: 1, color: '#4680FF'}
									]
								)
							},
							data: [1220, 4182, 2191, 4234, 3290, 4330, 2310]
						},
					]
                })
            },
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss">
    .p-companyManagement {
        .mess {
            border: 1px solid #D9DCE0;
            border-radius: 8px;
            margin: 25px 22px;
            padding: 10px 20px;
            .tip {
                border-bottom: 1px solid #D9DCE0;
                height: 35px;
                line-height: 35px;
                font-size: 13px;
                text-align: right;
                color: #ccc;
            }
            .companyTop {
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                text-decoration: none;
                margin-top: 15px;
                li {
                    width: 33%;
                    height: 40px;
                    line-height: 40px;
                }
            }
            .companyTop::after {
                content: "";
                height: 0;
                width: 33%;
            }
            img {
                float: left;
                display: inline-block;
                width: 22px;
                height: 22px;
                margin-top: 8px;
            }
            .name {
                float: left;
                display: inline-block;
                color: #ccc;
                font-size: 13px;
                height: 40px;
                line-height: 40px;
                margin-left: 5px;
            }
            .money {
                font-size: 22px;
                margin-left: 10px;
                color: #333;
                font-weight: bold;
            }
            .companyTop li {
                width: 33%;
            }
            .companyBottom {
                display: -webkit-flex;
                display: flex;
                li {
                    width: 25%;
                    height: 40px;
                    line-height: 40px;
                }
            }
        }
        .content {
            padding: 15px;
        }
        .echart-content {
            .echartContent li ,#orderMessage, #incomeMessage, #profitsMessage,
            #collectionMessage, #paymentMessage, #cooperationMessage {
                position: relative;
                width: 560px;
                height: 400px;
                float: left;
                .cutMonth {
                    z-index: 100;
                    position: absolute;
                    top: 8px;
                    left: 50px;
                    .month {
                        float: left;
                        background-color: #EAE9E9;
                        padding: 3px 7px;
                        border-radius: 3px;
                        color: #333;
                    }
                    .left, .right {
                        float: left;
                        position: relative;
                        display: inline-block;
                        width: 32px;
                        height: 32px;
                        top: -5px;
                        margin-left: 8px;
                    }
                }
            }
			.echartContent {
				margin-top: 15px;
			}
            .echartTip {
                border: 1px solid #ddd;
                border-radius: 1px;
                ul {
                    display: -webkit-flex;
                    display: flex;
                    height: 63px;
                    li {
                        width: 33%;
                        line-height: 63px;
                        color: #394662;
                        text-align: center;
                    }
                    span:nth-child(1) {
                        font-size: 14px;
                    }
                    span:nth-child(2) {
                        margin-left: 5px;
                        font-size: 22px;
                        font-weight: bold;
                    }
                }
            }
        }
    }
</style>
